<template>
	<view class="content">
		<image class="logo" :src="config?.share_img" mode="scaleToFill" />
		<!-- <image src="/static/login/loginwz.png" class="logowz" mode="widthFix" /> -->
		 <view class="wenzi">
			<view>HELLO,</view>
			<view>欢迎登陆 <span>{{ wenzi }}</span></view>
		 </view>
		<!-- #ifdef MP-WEIXIN -->
		<button :disabled="isLogin" @click="sublogin" class="blue-linear btn">立即登陆</button>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<button :disabled="isLogin" @click="wetchatlogin" class="blue-linear btn">立即登陆</button>
		<!-- #endif -->
		<view class="checkwt flex flex-align" @click="isCheck = !isCheck">
			<uni-icons :type="isCheck?'checkbox-filled':'circle'" :color="isCheck?'#0B8EFF':'#9FABC2'" size="20"></uni-icons>
			 请阅读并同意
			<text @click.stop="goUrl('/pages/login/xieyi/xieyi?type=1', false)">《用户协议》</text>
			和
			<text @click.stop="goUrl('/pages/login/xieyi/xieyi?type=1', false)">《隐私政策》</text>
		</view>
		<image class="imgBg" src="/src/static/login/loginbg.png" mode=""></image>
		<setInfo ref="setInfoRef" @submit="submit" />
	</view>
</template>
<script setup lang="ts">
	import { toast, goUrl, getCache, setCache, getQueryString, wxH5Login } from '@/utils'
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { useUserStore } from '@/store/modules/user';
	import API_CONFIG from '@/api/config'
	import SetInfo from './components/setInfo.vue'

	const setInfoRef = ref<typeof SetInfo>()
	const userStore = useUserStore();
	const config = ref<Recordable>(userStore.config?.scan)
	const wenzi = computed(() => {
		return userStore.config?.site_name 
	})
	const isLogin = ref(false)
	const isCheck = ref(false)
	onLoad(() => {

	})

	const sublogin = () => {
		if (!isCheck.value) {
			toast('请先同意用户协议和隐私政策')
			isLogin.value = false
			return
		}
		setInfoRef.value?.open()
	}

	const submit = (setInfos : any) => {
		const options = getCache('options')
		const query = options.query
		uni.showLoading({
			title: '登陆中...',
			mask: true
		})
		uni.login({
			provider: 'weixin', // 微信登录
			success: (loginRes) => {
				const code = loginRes.code;
				API_CONFIG.login({ code: code, inviter_code: query.inviter_code, ...setInfos }).then(async (res) => {
					setCache("token", res.token)
					userStore.token = res.token
					await userStore.setUserInfo()
					uni.hideLoading()
					if (query.liveid) {
						uni.reLaunch({
							url: '/' + options.path + '?' + 'inviter_code=' + query.inviter_code + '&liveid=' + query.liveid
						})
					} else if (options.path == 'pages/login/index') {
						uni.reLaunch({
							url: '/pages/user/index'
						})
					} else {
						uni.reLaunch({
							url: '/' + options.path
						})
					}
				})
			},
			fail: (err) => {
				console.error('登录失败:', err);
				uni.hideLoading()
				toast('登录失败')
				isLogin.value = false
			}
		});
	}

	const wetchatlogin = () => {
		if (!isCheck.value) {
			toast('请先同意用户协议和隐私政策')
			isLogin.value = false
			return
		}
		const appID = config.value?.info.appId
		wxH5Login(appID)
	}
</script>

<style lang="scss" scoped>
	page {
		background: url('@/static/login/loginbg.png') no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
	}
	.wenzi {
		font-size: 52rpx;
		color: #323232;text-align: center;
		font-weight: bold;margin-top:5vh;
		span {
			// 文字颜色从左往右颜色渐变
			background: linear-gradient(to right, #1F7FFF, #9D1EFF);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
	}
	.imgBg {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: -1;
		top: 0;
		left: 0;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20vh;
		justify-content: center;
		position: relative;
		z-index: 1;

		.logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}

		.logowz {
			width: 400rpx;
			margin-top: 5vh;
			height: 140rpx;
		}

		.btn {
			margin-top: 5vh;
			color: #fff;
		}

		.checkwt {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #9FABC2;

			text {
				color: #305DFF;
				font-weight: bold;

			}
		}
	}
</style>